<template>
	<view class="cancelList">
		<fui-tabs :tabs="tabs" scroll alignLeft @change='serviceChangeTab' ontWeight='600' selectedFontWeight='600'
		 sliderBackground='#35743D' selectedColor='#35743D' size='30' scale='1' :short='false'></fui-tabs>
		<view class="cancel-choose">
			如预订成功后无房，微湖游将全力协调入住。
			第一步：联系微湖游
			如您在订单确认后，抵达酒店前，酒店无法安排入住，或您在约定时间到店后发现无房，请立即拨打24小时服务热线888888888，通知微湖游。
			第二步：协调解决
			微湖游会立即与酒店协调为您安排原标准或以上级别的房间入住，并承担由此产生的差价，差价金额上限为微湖游原订单的首晚房费。若无法安排您入住原酒店任何房型，微湖游会帮助您预订附近同等酒店，并承担由此产生的价，差价金额上限为微湖游原订单的首晚房费。
			第三步：履行赔付
			经调查情况属实后，微湖游会联系您履
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseOssUrl,
	} from '@/common/settings';
	export default {
		//登录状态
		// computed: mapState(['isLogin']),
		computed: mapState(['userId']),
		data() {
			return {
				baseOssUrl: baseOssUrl,
				tabs: [{
					//标签显示文本（String）
					id: '0',
					name: '入住保障'
				}, {
					id: '1',
					name: '退订保障'
				}, {
					id: '2',
					name: '免责声明',
				}, {
					id: '3',
					name: '安全提示'
				}],
			}
		},
		methods: {
			serviceChangeTab(e) {

			},
			confirmCancel() {
				console.log("111")
				uni.navigateTo({
					url: '/pages/cancelSuccess/index'
				})

			}

		}
	}
</script>


<style lang="scss" scoped>
	.cancelList {
		height: 100%;

		.cancel-cont {
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 24rpx;
			padding: 24rpx;

			.cancel-money {
				border-bottom: 1px solid #D0D0D0;
				padding-bottom: 20rpx;

				.money-cont {
					display: flex;
					justify-content: space-between;
					color: #1D1D1D;
					font-weight: bold;

					.money-num {
						color: #D93C3C;
					}
				}

				.cancel-text {
					margin-top: 16rpx;
					color: #707070;
				}
			}

			.hotel-pay {
				margin-top: 20rpx;

				color: #707070;

				.hotel-cont {
					display: flex;
					justify-content: space-between;

					.hotel-num {
						color: #1D1D1D;
						font-weight: bold;
						font-size: 30rpx;
					}
				}

				.hotel-text {
					margin-top: 16rpx;
				}
			}
		}

		.cancel-choose {
			background: #FFFFFF;
			margin-top: 24rpx;
			padding: 24rpx 24rpx;
			height: 100vh;

		}


	}
</style>
